<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='js/tool.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for("static", filename="main.css") }}">
</head>

<body>
    <p><textarea id="showcontent" name="showcontent" cols="30" rows="10" readonly></textarea></p>
    <p><input id="edit01" type="text" name="edit01"></p>
    <p><input id="send-btn" type="button" value="确定"></p>
    <p><input id="send-stop-btn" type="button" value="停止"></p>
    <p><input id="send-showqueue-btn" type="button" value="显示队列"></p>
    <p><input id="send-close-ws-btn" type="button" value="关闭websocket"></p>
    <p><input id="clean-btn" type="button" value="清除内容"></p>
    <p><input id="reconnect-btn" type="button" value="重新连接"></p>
    <p>
    <div id="testdiv"></div>
    </p>
    <p><input id="testdiv-btn" type="button" value="ws02"></p>
</body>

</html>
<script>
    $(document).ready(function() {
        function sleep(time) {
            return new Promise(resolve => setTimeout(resolve, time));
        }

        let start_flg = 0;
        let ws_id = null;
        if (window.WebSocket) {
            let ws = new WebSocket("ws://192.168.117.128:10000/shell");
            // console.log(ws.WebSocket);
            ws.onopen = function(message) {
                $("#showcontent").val("收到信息")
                // console.log(message);
            }
            ws.onclose = function() {
                $("#showcontent").val("websocket 关闭了")
            }
            ws.onerror = function() {}
            ws.onmessage = function(message) {
                // console.log(message);
                $("#showcontent").val($("#showcontent").val() + message.data);
                if (start_flg == 0) {
                    ws_id = message.data;
                    if (message.data == "收到服务器的连接了") {
                        return
                    }
                    console.log(ws_id);
                    start_flg = 1;
                }
                var showcontent = document.getElementById("showcontent");
                showcontent.scrollTop = showcontent.scrollHeight;


            }

            $("#send-stop-btn").click(function() {
                $.ajax({
                    url: "{{ url_for('stop_req') }}",
                    method: "get",
                    data: {
                        ws_id: ws_id
                    },
                    success: function(d) {
                        console.log(d.ret);
                        console.log("ws_id: " + ws_id);
                    }
                });
            });

            $("#send-btn").click(function() {
                $("#send-stop-btn").click();
                let sendVal = $("#edit01").val()
                // console.log(sendVal);
                $("#showcontent").val($("#showcontent").val() + "\n");
                ws.send(sendVal);
            });


            $("#send-showqueue-btn").click(function() {
                $.ajax({
                    url: "{{ url_for('show_queue') }}",
                    method: "get",
                    success: function(d) {
                        console.log(d.ret);
                    }
                });
            });

            $("#send-close-ws-btn").click(function() {
                ws.close();
            });

            $("#clean-btn").click(function() {
                $("#showcontent").val("");
            });

            $("#edit01").keydown(function(e) {
                console.log(e.key);
                if (e.key == "Enter") {
                    console.log("xxxxxxxx");
                    $("#send-btn").click();
                }
            });

            var pre_key = null;
            var startTime = null;
            $(document).keyup(function(e) {
                // if (e.ctrlKey) {
                //     if (e.key == '\\') {
                //         $("#send-stop-btn").click();
                //     }
                // }
                console.log("key:" + e.key)
                switch (e.key) {
                    case '\\':
                        if (e.ctrlKey)
                            $("#send-stop-btn").click();
                        break;
                    case 'j':
                        if (pre_key == 't' && diffTime(startTime, new Date()) < 500) {
                            console.log("tj 成功");
                            pre_key = null;
                            // 在此处执行命令
                            $("#edit01").focus();
                            $("#edit01").val("");
                            return;
                        }
                        break;
                    case 'c':
                        if (pre_key == 't' && diffTime(startTime, new Date()) < 500) {
                            console.log("tc 成功");
                            pre_key = null;
                            // 在此处执行命令
                            $("#showcontent").val("");
                            var value = $("#edit01").val();
                            $("#edit01").val(value.slice(0, -2));
                            return;
                        }
                        break;
                    default:
                        test();
                }
                pre_key = e.key;
                startTime = new Date();
                console.log("pre_key:" + pre_key);
            });

            $("#reconnect-btn").click(function() {
                start_flg = 0;
                console.log("reconnect");
                ws.close();
                ws = new WebSocket("ws://192.168.117.128:10000/shell");
                ws.onopen = function(message) {
                    $("#showcontent").val("收到信息")
                    console.log(message);
                }
                ws.onclose = function() {
                    $("#showcontent").val("websocket 关闭了")
                }
                ws.onerror = function() {}
                ws.onmessage = function(message) {
                    // console.log(ws_id);
                    $("#showcontent").val($("#showcontent").val() + message.data);
                    if (start_flg == 0) {
                        ws_id = message.data;
                        if (message.data == "收到服务器的连接了") {
                            return
                        }
                        console.log(ws_id);
                        start_flg = 1;
                    }
                    var showcontent = document.getElementById("showcontent");
                    showcontent.scrollTop = showcontent.scrollHeight;

                }

            });

            $("#testdiv-btn").click(function() {
                let ws01 = new WebSocket("ws://192.168.117.128:10000/feed01");
                // console.log(ws.WebSocket);
                ws01.onopen = function(message) {
                    $("#testdiv").text("收到信息")
                }
                ws01.onclose = function() {
                    $("#showcontent").val("websocket 关闭了")
                }
                ws01.onerror = function() {}
                ws01.onmessage = function(message) {
                    // console.log(message);
                    $("#testdiv").text($("#testdiv").text() + message.data);

                }
            })
        }

    })
</script>
